<template>
  <el-dialog
    class="base-dialog"
    :title="title"
    :visible="dialogVisible"
    :append-to-body="true"
    destroy-on-close
    :custom-class="'record-verify-dialog  panna-dialog_small'"
    :before-close="handleClose"
  >
    <div class="dialog-content">
      <el-form
        ref="formData"
        class="system-user-form"
        :model="formData"
        status-icon
      >
        <el-form-item :label="label" label-width="60px">
          <el-input
            v-model="formData.remark"
            :autosize="{ minRows: 2, maxRows: 12 }"
            type="textarea"
            :placeholder="'请输入' + label + '...'"
          ></el-input>
        </el-form-item>
      </el-form>
    </div>
    <div slot="footer" class="dialog-footer" align="center">
      <el-button
        v-show="type === 'verify'"
        type="primary"
        @click="save('save', 30)"
        >同意</el-button
      >
      <el-button
        v-show="type === 'verify'"
        type="danger"
        @click="save('save', 40)"
        >驳回</el-button
      >
      <el-button
        v-show="type === 'discard'"
        type="danger"
        @click="save('save', 70)"
        >作废</el-button
      >
      <el-button @click="save()">取消</el-button>
    </div>
  </el-dialog>
</template>
<script>
import { verify, invalid } from "../../../api/Eln/ExperimentTemplateRecord.js";
export default {
  name: "ExperimentTemplateRecordDialog",
  props: {
    dialogFormVisible: {
      type: Boolean,
      default: false,
    },
    data: {
      type: Object,
      default: () => { },
    },
    type: {
      type: String,
      default: "verify",
    },
  },
  data() {
    return {
      dialogVisible: false,
      title: "",
      label: "",
      formData: {
        remark: "",
      },
    };
  },
  watch: {
    dialogFormVisible(val) {
      this.dialogVisible = val;
      if (val) {
        this.title = this.type === "verify" ? "审核" : "作废";
        this.label = this.type === "verify" ? "评论" : "原因";
      }
    },
  },
  methods: {
    save(type, val) {
      if (!type) {
        this.handleClose();
        return;
      }
      const promise =
        val === 70
          ? invalid({
            _id: this.data._id,
            invalidRason: this.formData.remark,
          })
          : verify({
            id: this.data.id,
            _id: this.data._id,
            status: val,
            remark: this.formData.remark,
            creatorId: this.data.creatorId,
          });
      promise
        .then((res) => {
          this.$parent.getList();
          this.handleClose();
        })
        .catch(() => {
          this.$parent.getList();
          this.handleClose();
        });
    },
    handleClose() {
      this.formData.remark = "";
      this.$emit("update:dialogFormVisible", false);
    },
  },
};
</script>
<style lang="scss" scoped>
::v-deep .el-dialog.record-verify-dialog {
  height: 426px;

  .el-dialog__body {
    height: calc(100% - 54px - 62px);
  }
}
</style>
